<template>
  <div class="app-container">
    <el-drawer
      :visible.sync="dayMainStatus"
      direction="rtl"
      title="周报"
      size="50%"
      class="drawer"
      :close-on-press-escape="false"
    >
      <div v-loading="dayMainLoading" style="padding:0 80px;min-height:70vh;">
        <div style="display: flex;margin-bottom:30px;">
          <el-date-picker
            v-model="form.checktime"
            type="week"
            placeholder="选择周"
            :picker-options="pickerOptions"
            format="yyyy 第 WW 周"
          >
          </el-date-picker>
          <el-button
            plain
            type="success"
            size="mini"
            style="display: flex;margin-left:20px;align-items: center"
            @click.stop="aicreate()"
            :loading="ailoading"
          >
            <div style="display: flex;align-items: center">
              <i class="iconfont icon-dc-icon-rengongzhineng" style="font-size:18px;margin-right:5px;"></i>
              <span>使用Ai自动填充周报</span>
            </div>
          </el-button>
        </div>
        <el-form ref="form" :model="form" label-width="40px">
          <el-form-item label="标题">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="内容">
            <div style="border: 1px solid rgb(221, 221, 221);">
              <Toolbar
                style="border-bottom: 1px solid #ddd;"
                :defaultConfig="toolbarConfig"
                :editor="editor"
                mode="default"
              />
              <div class="edit-main">
                <Editor
                  v-model="form.content"
                  mode="default"
                  @onCreated="onCreated"
                />
              </div>
            </div>
            <el-row style="margin-top:20px;">
              <el-button type="primary" @click="review">发布</el-button>
              <el-button type="success" @click="refpost">重置</el-button>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
    <div class="calendarMain" v-loading="PageLoading">
      <h3 style="border-bottom:1px solid #ddd;padding-bottom:20px;">周历
        <el-button-group class="filter-item" style="margin-left:30px;">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-refresh"
            @click="fetchData"
          >
            刷新
          </el-button>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="add"
          >
            新增周报
          </el-button>
        </el-button-group>
      </h3>
      <div class="week-main" v-for="(item,idx) in list">
        <el-descriptions :title="item.star_time" direction="vertical" :column="4" border>
          <el-descriptions-item label="发布日期">{{ item.pk_c_time }}</el-descriptions-item>
          <el-descriptions-item label="标题">
            <a :href="`https://wz.mala.cn/wz/sdzz?sdzz=huiyin&&id=${item.id}`" target="_blank">
              <el-tag>{{ item.title }}</el-tag>
            </a>
          </el-descriptions-item>
          <el-descriptions-item label="操作"><span class="edit">编辑</span><span class="del">删除</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="dateParms.page"
      :limit.sync="dateParms.limit"
      @pagination="fetchData"
    />
  </div>
</template>

<script>
import { Aicreate, getWeekReport, reportDopost,AiWeekcreate } from '@/api/wz'
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import Pagination from '@/components/Pagination'

export default {
  components: { Editor, Toolbar, Pagination },
  data() {
    return {
      html: '',
      pickerOptions:{
        firstDayOfWeek:1,
      },
      editor: {},
      toolbarConfig: {
        excludeKeys: 'emotion,group-more-style,underline,italic,color,bgColor,fontSize,lineHeight,fontFamily,|,codeBlock,fullScreen,undo,redo,group-video,group-indent,todo'
      },
      PageLoading: true,
      nowDay: '',
      dayMainLoading: true,
      dayMainStatus: false,
      ailoading: false,
      dateParms: {
        starTime: '',
        page: 1,
        limit: 20,
      },
      checkValue: '',
      form: {
        title: '',
        content: '',
        checktime:''
      },
      list: [],
      total:0,
    }
  },
  watch: {
    'day': function(n) {
      console.log(n)
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    review() {
      reportDopost(this.form).then(r => {
        this.fetchData()
        this.refpost()
        this.$message.success('发布成功')
        window.open('https://wz.mala.cn/wz/sdzz?sdzz=huiyin&&id=' + r.data)
      })
    },
    refpost() {
      this.form = {
        title: '',
        content: '',
        checktime:''
      }
    },
    onCreated(editor) {
      this.editor = Object.seal(editor)
    },
    aicreate() {
      if(!this.form.checktime){
       this.$message.error('请选择周');
       return false
      }
      this.ailoading = true
      AiWeekcreate({ day: this.form.checktime || '' }).then(r => {
        this.ailoading = false
        this.form = {
          title: r.data.title,
          content: r.data.content,
          checktime:this.form.checktime
        }
      }, data => {
        this.ailoading = false
      })
    },
    add() {
      this.dayMainStatus = true
      this.dayMainLoading = false
    },
    fetchData() {
      this.PageLoading = true
      getWeekReport(this.dateParms).then(response => {
        this.list = response.data.data.data
        this.total = response.data.data.total
        this.PageLoading = false
      },data=>{
        this.PageLoading = false
      })
    }
  }
}
</script>
<style lang="scss">
.w-e-text-container{
  a{
    color:#336699;
  }
}
.calendarMain {
  padding: 0 20px;

  .el-calendar-day {
    height: 110px;
  }

  .el-calendar__title {
    font-size: 18px;
    font-weight: bold;
    color: #20a0ff;
  }

}

</style>
<style lang="scss" scoped>
.calendarMain {
  overflow: auto;

  .week-main {
    padding: 20px 0;
    max-width: 800px;
    border-bottom: 1px solid #eee;

    .edit, del {
      margin: 0 10px;
    }

    .edit {
      color: #20a0ff;
    }

    .del {
      color: orange;
    }
  }

  &::-webkit-scrollbar {
    width: 3px;
    height: 1px;
  }

  &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    //border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #aaa;
  }

  &::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    //border-radius: 10px;
    background: #fefefe;
  }
}

.edit-main {
  height: 500px;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 3px;
    height: 1px;
  }

  &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    //border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #aaa;
  }

  &::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    //border-radius: 10px;
    background: #fefefe;
  }
}

.calendarMain {
  .calendarBox {
    width: 100%;
    height: 100%;
    position: relative;

    &:hover {
      .itemPlus {
        display: block;
      }
    }

    .itemPlus {
      color: #ed883f;
      position: absolute;
      top: 0px;
      right: 5px;
      text-align: right;
      font-size: 12px;
      display: none;
    }

    .item {
      padding: 5px;
      font-size: 12px;
      text-align: justify;
      border-radius: 5px;
      color: #409EFF;
      background: #ecf5ff;

      &:hover {
        color: #ed883f;
      }
    }
  }
}
</style>
